<template>
    <div id="darken"></div>
    <div id="loading"> <img src="@/assets/images/loading.gif" />
    </div>
    <div id="notify">
        <p>{{ title }}</p>
        <p>{{ content }}</p>
    </div>
</template>

<script>
export default {
    name: 'Loading', data() {
        return {
            title: '',
            // 通知的标题 
            content: ''
            // 通知的内容 
        }
    },
    mounted() {
        window.emitter.on('NOTIFY', this.notify);
        // 订阅NOTIFY事件
    }, beforeUnmount() {
        window.emitter.off('NOTIFY', this.notify);
        // 取消订阅NOTIFY事件
    }, methods: {
        showLoading() { document.getElementById("darken").style.display = "inline"; document.getElementById("loading").style.display = "inline"; },
        hideLoading() { document.getElementById("darken").style.display = "none"; document.getElementById("loading").style.display = "none"; },
        notify(data) {
            // 通知方法
            this.title = data.title;
            // 设置通知的标题 
            this.content = data.content;
            // 设置通知的内容 
            document.getElementById("notify").style.display = "inline";
            // 显示通知 
            setTimeout(() => {
                // 3秒后隐藏通知 
                document.getElementById("notify").style.display = "none";
            }, 3000);
        }
    }
}
</script>

<style> #darken {
     position: absolute;
     display: none;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: black;
     opacity: 0.5;
 }

 #loading {
     position: absolute;
     display: none;
     left: 50%;
     top: 50%;
     transform: translate (-50%, -50%);
     -ms-transform: translate (-50%, -50%);
     /* for IE 9 / -webkit-transform: translate (-50%, -50%); / for Safari */
 }

 #loading img {
     width: 400px;
 }

 #notify {
     position: absolute;
     display: none;
     left: 50%;
     top: 50%;
     transform: translate (-50%, -50%);
     -ms-transform: translate (-50%, -50%);
     /* for IE 9 / -webkit-transform: translate (-50%, -50%); / for Safari */
     background-color: white;
     border: 1px solid black;
     padding: 10px;
 }</style>